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Concepts and basics 
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Objective 


General Objective 
To identify the content of website 
Specific Objectives 
By the end of this lesson, the students will be able to 


Identify the concept of Website, Home Page, and Webpage. 

Deduce that the website has more than webpage. 

Deduce the content of webpage [Text, image, video, hyperlink,..etc] 
Identify the concept of static webpage. 

Identify the concept of Interactive webpage,. 
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WebSites 


A Website is a webpage or more, connected with each other, with a 
certain name and Web address. The website can be visited on the 
computer or the cell phone. 


Cooperating with your classmates and with the help of the teacher: 
-Define the website. 

-Define the Home page. 

-Define the webpage. 

-Deduce that the website consists of more than a webpage. 


-Upload the website of the ministry of Education http://www.moe.gov.eg 
The teacher discusses with the students the following: 


Website — Home page — Webpage 


es 


Web pag SS =a 
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MOE Website 


Web pages 


Website: 
It is a site on the internet that consists of a webpage or more, it is 
visited through a certain web address. 


Web Page: 
It is a document with electronic content on the internet which can be 


shown through a web browser. 


Home Page: 
It is the opening page in the website through which other pages can 


be visited. 
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Web page components 


| Activity 


L 


Cooperating with your classmates and with the help of the teacher: 

- Deduce the components of the webpage [ text- images- sound- video-hyperlinks, 
etc] 

- Deduce the types of Data shown on the web page. 

-Deduce the components of the different types of web pages. 


«fe aes 6 Ey — m 
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Baa hyperlink 


The components of the web page are: images, text, audio , video and 
hyperlink 


Components of the web page: 


The web page inculds texts , images, audio files, videos and hyperlinks. 
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Cooperating with your 
classmates and with the 
help of the teacher : 
-open a website and 
roam its pages 

-identify the Static web 
page components, which 
don’t change each time 
you visit the page. It can 
have texts, images, 
sound or video clips, 
which can’t be modified. 


Static Web Page: 


Ministry of Education 


Static and interactive web pages 


Activity 


“Static Web Page” 


The content of these pages is previously prepared by the page 
developer. The content doesn’t change and can’t be edited by the 


visitor. It is designed by HTML code | designing such pages. We will see 
how to design these pages later by using HTML. 
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The interactive web pages 

- Dear student, The e-learning page on the 
Ministry of Education website requires 
deciding the stage and school term to be 
able to see the curriculum or the text book 
of a certain school year. 

- Fill in the form, click “search” and write 
down notes on what happens. 


-The contact us page on the Ministry of 
Education Website requires filling some 
information. 

- Fill in the required information and click 
sign in. 

- Type your notes of what you see. 


Interactive web pages 
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Interactive Web Page: 
It is a webpage that has a content allowing the visitors to interact 
with and manipulate. This type is designed by HTML, JavaScript, PHP 
and others. 


| | 


Exercise 


a 


Cooperating with your classmates and with the help of the teacher, open 
websites like 


- http://www.sis.gov.eg 


-http://www.ahram.org.e 
Identify the homepage. 


-Identify the content of the website [text, images, video or 


hyperlinks] 
-Identify the static web page. 
-identify the interactive webpage. 
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Remember: 


Website: 


It is a site on the internet that consists of a webpage or more, it is 
visited through a certain web address. 


Web Page: 


It is a document with electronic content on the internet which can be 
shown through a web browser. 


Home Page: 


It is the opening page in the website through which other pages can 
be visited 


Static Webpage: 


The content of these pages is previously prepared by the page 
developer. The content doesn’t change and can’t be edited by the visitor 
«It is designed by HTML code 


Interactive Webpage: 


It is a webpage that has a content allowing the visitors to interact with 
and manipulate. This type is designed by HTML, JavaScript , PHP and 
others. 
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Prepare for the next lesson 


What are the stages to design and create a website? 
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Exercises “> 
CO 


Question 1 : Complete the following: 
-The website iS ooer oeer et 
- The webpage iS...........sssesessesssesosossesesoeosssesscee 
= The Homepage İS cs. :cocscececcacessccoccccscouescccseceaes 
- The static webpage iS .......sesssssessososssesssssesese. 
-The interactive Webpage iS..........sssesssesosssesseses 
Question 2 
Open this website http://www.egynews.net 


-Identify the homepage. 
- State the contents of the homepage [ text, images, video, hyperlinks,...] 


-What type is the homepage: static or interactive ? 


- Go through the site pages and identify the page contents, then decide if 
it is a static or an interactive web page. 
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Stages of designing and creating 


a Website 


te 


Ai 2) 
ify 


alo SEI 
Se A 
h 
Nr 


E 


Second Year Prep 17 


Ministry Of Education 


Stages of designing and creating a website 


Designing and creating a website goes through stages that can be set 
here: 

- The first stage: planning to create a website. 

- The second stage: design the web pages. 

-The third stage: prepare and develop the web pages. 

-The fourth stages: implement the web pages. 

- The fifth stage: publish the website on the internet 


@ 


e- 


Stages of designing and creating a website 
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The First Stage: Planning 


In this stage, we draw a simple diagram of the web pages of the 
website, the homepage and the connected pages 

- Decide the information and data to be included as data or service 
according to the need. 


Cooperating with your classmates and with the help of the teacher, plan a website 
with the following 


- Title and subject to be dealt with in the website. 
-The number of pages [the homepage and the web pages] 


- Plan the diagram of the homepage and other web pages, decide the information 
and data to be shown. 


The Second Stage: Design the web page 


This stage is the most important one as we design the format and 


shape of the homepage and other pages. The different format types are 
designed, the colour, the background, the font size and type, place of 


putting text, images and video clips and decide the different hyperlinks 
inside the same page and connected with other pages in the website. 
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| Activity 


Cooperating with your classmates and with the help of the 


teacher: 
- Design the shape of the home page and the other 
web pages. 


- Design the hyperlinks. 


- Design the places to put text, images and video 
clips on the page. 


| 
Vision and Photo Album About school 
Mission 


"A diagram for designing a website “ My School usin ).Lo 
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The Third stage: Prepare and develop 


This stage consists of important steps which are as follows: 

- Prepare the text which will be added to the page using a text editor 
program and save it in a folder. 

-Prepare the image files and save them in a folder. 

-Prepare the video and sound files and save them in a folder. Later on 
we will know how to create and edit these files. 


Activity 


1-prepare the text files: 
Cooperating with your classmates and with the help of the 


teacher: 

-Search for the suitable text files to be used in the web 
page. 

-Select the needed text files for each web page. The 
search for the text files can be done through the 


internet or asking the school administration about 
information like: 


When did the school open? 
The school address. 


The telephone number. 
Vision and mission of the school. 


Ministry Of Education 


2-Prepare the image files 


Cooperating with your classmates and with the help of the teacher: 

-take photos of the school, the classes, the playground and labs. 

- collect the photos of school activities and competitions, photos of certificates 
and prizes which the school won. 

- save the images in a folder in a drive 


oh Gis 
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-Take photos using a digital camera or a mobile phone 

camera. 

- Collect the images about the activities which the 

students do. 

- collect the images of the school competitions at school or at the educational 
administration [ Idara} 

-Collect images about the certificates and prizes which the school won. 

-Input these images to the computer using a scanner, mobile data cable or any 
other way. Create a folder “ Pro1” to save the images in it. 


Exercise — 
- Cooperating with your classmates and with the help of the teacher: 
- identify some image file types. 
-Search the internet for images with the extension JPG- GIF-BMP-PNG and discuss 
the difference between each type. 


3-Prepare the sound and video files: 
This will be discussed in the following lessons. 
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Stage Four: Implementation 


This is the stage when we change the paper design into web page to be 
shown and visited on the internet with an internet browser program. 

- Input the data, text, images, nd videos and so on. 

- Create the necessary hyperlinks to connect the different pages and 
facilitate browsing the site. This is done using HTML codes. 


Stage five: Publish on the internet 


-In this stage, a web address is taken and the storage capacity is decided 
to save on one of the servers and publish the site on the internet 


A suggested diagram of the website “My School” ijt. " 


My school 
Home page- About school- Photo 
Album-Vision and mission- Contact us 
I i 


| 


Vision and Mission lbum 


= About School 
Vision:to prepare a j f Paar a 


distinguished student able to.. ; wan = SE h € We 


= 
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Remember 


Designing and creating websites has many stages: 
Stage one : planning 
- Set up a simple diagram on paper for the homepage and the site 
pages. 
-Decide the data and information to be used in the webpage. 
Stage two :design the format and shape of the homepage and web 
pages 
Design the page format 
Select the background colour. 
-Select the places to add text files, images, videos and sound files. 
-Create the hyperlinks connecting the pages . 
Stage Three : Prepare and develop 
This stage consists of important steps which are as follows: 
- Prepare the text which will be added to the page using a text editor program 


and save it in a folder. 
-Prepare the image files and save them in a folder. 
-Prepare the video and audio files and save them in a folder. Later on. 


Stage Four : Implementation 
This is done using a programming language and HTML codes: 


— Convert the design into webpage. 

— Input the data and files. 

— Create the hyperlinks. 

Stage Five : Publish the website on the internet 

Choose a title, select a web address, decide the storage capacity on a server and 
publish on the internet. 
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Exercises “5 
Question One: Complete: 
d 


First, designing and creating a website goes through 
stages which are: 


Computer and Information Technology 26 


Ministry of Education 


In Stage three in designing and creating a website, we 
prepare audio files. 


How can we create a sound file? 
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Objectives 


General objectives 


Create and process audio files through one of the related 
programs. 


By the end of this lesson, students will be able to: 


identify creating and audio processing program 

setup and prepare (data / software components and material) to 
create the audio 

Use Audacity program to create and process audio files. 

Edit (Add Effect / cut and paste / delete) in the audio clips. 
Identify appropriate extensions of audio files. 
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There are many programs that are used on dealing with audio files. 
These programs help to process audio files in an easy and proper way. 
They are software programs that enable the user to create and process 
audio files. They contain tools that creating and processing audio files. 


Creating an audio file 

You can create an audio file containing audio clips and the words 
required as well as adding different effects on the audio and specifically 
on a track, and then save the audio in a file. To create an audio file, we 
need a sound processing software. 

We are going to create an audio with the name "my school" with a 
comment audio to a project or be included in the video clip for the 
school. 


Suggest an edit 
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Firstly: the setup and processing to create an audio 
file stage: 


Cooperating with your classmates and with the help of the teacher, prepare for 


the required steps to create an audio file to a school, as follows: 
1- Preparing for collecting data about school, as follows: 

v School name: ... Educational department: ... governorate... : 

Y School trips and various activities provided by...............++ 

v The competitions the school shared in 

v The ranks won in those competitions........... : 

Y Recognitions obtained by the school 

v The summer activities the school provides 

v School trips and various activities provided by the school 
-Type the data collected about the school in one of the text editing 
programs and edit them. 
Save the text data in a text file. 


2-Preparation and processing of software 
and hardware components: 

Through the school computer lab and 
with the help of your teacher, students do 
the following: 

- Make sure you install a program and 
create audio processing on computers 
laboratory. 
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-.Make sure your microphone is plugged to your 
computer. 


— Setup and preparing to create a audio file stage include: 
- All the data that will be audio recorded. 
-Make sure of the software components (install one of the 


programs of creating and audio processing on computers in 
the lab.) 


-Make sure of the software components (install one of the 
programs of creating and audio processing on computers in 
the lab.) 

-Ensure the hardware components (connecting the microphone 


"Mic" to a computer.) 
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Secondly, the implementation stag 


Cooperating with your classmates and with the help of the teacher, create 
an audio file from their school through one of the programs of creating 


and audio processing as follows: 
-Load one of the programs of creating and audio processing. 


-Audio recording through the program. 
-Read the text data already prepared and inserted to the computer 


using a microphone as an input unit. 
-Turn on the sound after the completion of recording and listen to it 


through headphones. 


Steps to implement activity: 


-Using the "Audacity" program to create and audio processing which is 
an open-source software, a program that can be run on different 


operating systems like (Windows —Linux) 
You can download the program through the website: 


http://audacity.sourceforge.net 
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"Selection ‘Start © En Length Audio Position: 
~ [00n00 m00.000s~ [00h00m00.000s~ [00h00m00.000s~ 


Audacity Interface (a program for creating and processing audio) 


-To start voice recording through the program, click the Record button ^ 
where the 

program 

becomes in the Mte | Soo 
audio recording T 


mode. 

-Read the data 
collected for the school in the text file using the Mic "microphone" as a 
unit input. 


The Program Timeline to make sound appear 
-To complete entering audio data,click "Stop" button in the program. 


-To listen to the sound that has been entering click "Play" button [> in 
the program, listening to the sound through the speakers. 
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The implementation Stage to create a sound file includes: 


-Load a set up and sound processing software. 
-Click " Record " button to record voice. 
Insert text data by using the microphone. 
To finish recording, click " stop" 
To listen to the audio Through the speakers, click " play " 
To listen to the audio Through the speakers, click " play " 


Thirdly, modifying the sound (or audio clip): 


After listening to the audio that was recorded there may be a need 
to After listening to the audio that was recorded there may be a need to 
add an effect on the sound (or audio) clip, delete or cut part of the 
sound (audio clip) and paste it somewhere else in the audio clips. Delete 
or cut part of the sound (audio clip) and paste it somewhere else in the 
audio clips. 
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Adding an effect on audio clip: 


Cooperating with your classmates and with the help of the teacher, add an 
effect on voice or sound clip as follows: 


-Audio playback by clicking " Play button" and listen to [> 


-Select the desired audio clip added to effect him by clicking and dragging on the 
desired sound indicator reading at the time the tape. 


x aS - 
Stereo, 44100Hz 
32-bit float 

Mute 


Program timeline the with the sound 
-From "Effect menu, select one of the desired effects. 
-Rerun the audio by clicking" play button" and listen to the audio clip 
after adding the effect. 


| Practice 


a 


To add other effects to the audio file or one of the audio clips. 
-Cooperating with your classmates and with the help of the teacher, identify the 
audio clip and add one effect like "Repeat." 

- Play the sound file and listen to it. 

-deduce what this effect does. 


- Notice that when we choose “Repeat “ effect, the selected clip is 
epeated. 
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Practice , 


To add other effects to one of the audio clips. 


Cooperating with your classmates and with the help of the teacher, 
identify the audio clip and add one of the effects like "Reverse." 
-Play back the audio and listen to it and try to conclude the purpose of 
this effect. 
Notice: On choosing "Reverse" effect, the beginning of audio is reversed 


with the of the end section. 
Practice 


Cooperating with your classmates and with the help of the teacher: 

- select the rest of the effects and add them to a sound clips. 

- play back the audio and listen to it and try to conclude the purpose of 
each effect. 


Add an effect on the audio clip: 
-Select the desired audio clip added to effect it by clicking 


and dragging on the desired sound indicator reading at the 
time the timeline. 
From " effect" menu, select one of the desired changes 


| | 
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2-Cut and paste an audio clip 


| ram 


Cooperating with your classmates and with the help of the teacher: 
- cut the portion of the audio and paste it in another place among the 
audio clips. 


-Select the desired audio clip you want to cut, from the Edit menu 
select "Cut". 


-Move the pointer on the timeline to the desired place to paste the 
audio clip, from the Edit menu select" Paste". 
-Rerun the audio by clicking the play button and listen to it. 


Cut and paste an audio clip 
Select the audio clip you want to cut. 


From ' Edit menu " select " Cut" 

-Move the pointer on the timeline to the desired place to paste the 
audio clip, ." 

From the Edit menu select" Paste" 
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3-Delete a section of the audio. 


[re 


Cooperating with your classmates and with the help of the teacher, delete a part 
of the sound audio clip as follows: 

Select the audio section you want to delete. 

Press ” Delete" from Keyboard to delete the audio section you selected. 


To delete an audio section: 
Select the audio section you want to delete. 
Press " Delete" from the keyboard. 
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Fourthly: Export an audio file with an appropriate 
extension. 


Activity 


Cooperating with your classmates and with the help of the teacher: 


export an audio file with an appropriate extension: 
To export an audio from " file menu", select "Export Audio" : 


Select the appropriate extension of the audio file: 
Save the audio file in " Pro 1" folder. 


To export an audio file with An appropriate extension: 
From the File menu, select "Export Audio" 
Select the appropriate extension of the audio file. 


C 
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Types of audio file extensions 


There are different types of the extension of audio files such as WAV, 
MP3, ... They differ in the quality and purity of sound and storage space. 
According to need, we use the proper file extension. 


Practice: 


Cooperating with your classmates and with the help of the teacher do the 
following: 

Identify different audio file extensions when saving as an audio file. 
Save an audio file with WAV extension, and save the file again with 
MP3 extension. 

-Comparison of audio files with the extension WAV and MP3 in terms 
of: 

File size. 

Sound clarity , purity and quality 

Through the Internet search for the types of sound with different 
extensions files. 

-Collect the information on the types of different extensions of audio 
files in a text program coordinators. 
The teacher discusses search results with students. 

Notes: 


-The sound of a WAV file extension is characterized by the sound 
quality and clarity, it has a large storage capacity, so it is not 
appropriate for publication via websites. 
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-Audio MP3 file , the sound Is of less purity, 
compared with the file with WAV extension, has less storage capacity, 


so it is appropriate for publication via websites. 
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Remember that 


To create an audio file, you should do the following: 

First: setup and processing: 

All the data that it will be recorded. 

Hard and software components 

Make sure there is a program to create and edit sound file that 
works properly. 


The Mic and speakers are connected to the computer. 


| Second : Implementation 
— Start a program that deals with sound files. 
Record the sound using the program. 
Use the Mic to input the sound 
Press “Stop “ to finish inputting the sound. 


— Hear the sound clip using the speakers by pressing “Play” button. 
Third : Edit the sound file 
— Add effect 

— Cut and paste a file 


— Delete a sound clip. 


| Fourth : Export the sound file 


— Export the sound file with appropriate extension 
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Exercise - 
E> 


The first question: Complete the following:: 
To create an audio file, do the following: 

Fir StV A Aaeeea eter ess 

Secondly: ieee ireira etesse eari 

MIMINGIY Sexe, cescerevapscnvebeasccsavetereessssatte tees: 

FOUPCI Vitec ct carcarcecsccetersse recuse 


Second question: Perform the following steps to create and export the 
audio file: 


Choose a topic of study from school subjects 


Collect information on the academic subject. 


Load one of the programs of creating and edit an audio file 
Create a sound file 


Export the file with the appropriate extension 
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Prepare for the next lesson 


In Stage three in designing and creating websites, 
there is preparing and creating video files. 


How can we create a video file? 
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Creating and Editing 


Video Files 
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Objectives 


General Objective: 


Creating and editing a video file using a video editing 
program 


Behavioural Objectives: By the end of this lesson, a student will 
be able to: 


Identify some video editing program. 

Import video editing program files (sound/images). 
Create video captions using the program. 

Edit video segments. 

Save video file project. 

Add (effects, transition effects, text) to video segments. 
Export video to a file with suitable extension. 
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Creating and Processing Video File Programs 


Creating and editing video programs are the ones that enable the user 
to create and edit video files. This is done through tools and effects that 
help the user create and edit video clips easily and fast. 


TO edit a video of a group of images taken, or edit video clips 
recorded by a video cam or a webcam, we must use a program through 
which the video is cut into segments of still clips. Moving these shots in 
a fixed speed makes them feel animated. Then these shots become easy 
to edit its content and in this way the video content can be edited. 
There are many programs that can be used in creating and editing video 
files like: “Kdenlive” and “OpenShot”, which are open source and free to 
use and easy to operate with Linux and Ms. Windows. There is also 
“Movie Maker” which runs in Windows. These programs and other ones 
can be downloaded online. 
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Download Video Program and Identify Its Interface 


Activity 


Cooperating with your classmates and with the help of the teacher, download one 
of creating and editing video programs and identify its interface. 


Procedures of Activity: 
-Download a video editing program .”OpenShot” will be used and 


you can get it on http://www.openshot.org 


OpenShot 


OpenShot Video Editor is used to create and edit videos. Videos can be 
created through images collected. OpenShot Video Editor enables the 
user to make a high quality video with images, backgrounds and 
inserting audio files easily. The interface is easy to use to add images 
and sound easily, with video effects, transitions and even texts to the 
segment. The program will be used to make a video about school 
activities. 
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File Edit Title View Help 


Project Files l : Æ% Video Preview 


ShowAll Video Audio Image |Filter 


P Project Files Transitions Effects 
T @ 20seconds 
00:00:2 0:40 


00:01:00 00:01:4 02:00 00:02:20 


É 00:00:00:01 


Track 4 


Track 3 


The interface consists of 
1- Main Toolbar. 
2- Project Files. 


3- Function Tab (Move —Images-Audio files) 


4- Preview Window. 
5- Edit Toolbar. 

6- Zoom Slider. 

7- Play head/Ruler. 
8- Timeline. 
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Exercise 


yy 


Cooperating with your classmates and with the help of the teacher: 

- Similarities and differences between the OpenShot Interface and other 
programs they used before. 

-Use Help to find new information about the program. 


Program Timeline: 


00:00:39:15 


Track 4 


2015-6356: 


7 oy 
l 


Track 2 DSC_0600jpg 


1- Ruler (to show the time length on the timeline). 

2-Play Head (reads the current clip on the timeline to show in Preview 
Window). 

3- Current Clip (image, sound or video). 

4-Tracks (They are similar to Layers where images, sounds or video 
caption clip is put on the track. Unlimited number of tracks can be used 
in the project. Notice that the higher track has the priority to read to 
show the video, then the lower and so on.) 
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Create Video Clips 


Activity 


Cooperating with your classmates and with the help of the teacher , create 
video clips about their school, including pictures of the school building, labs, 
playgrounds, activities, competitions and the most important trophies and prizes. 


Steps of the activity 


To create a video about the school easily , follow the following steps: 
1- Import images to the program. 


2- Put the images in order on the program timeline 
3- Import a sound file to the program. 
4- Preview the video. 


1-Import image files into the program: 
- Click Import files icon + in the Main Toolbar to add the images.( You 


can import files from File, then Import Files). 


- Import images from the “imu ” folder, to show in the “Project Files 


tab in the program interface. 
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Project Files Video Preview 


Show All Video Audio Image 


Project Files 
+ 


00:00:00:01 


Track 4 


2-Put Images in order on the Timeline: 


To create Video clips, the images are put in order on the video timeline. 


t : @ 20seconds 


00:01:00 


00:00:00:01 


Track 4 


Track 3 


"Timeline 
- Drag and drop the images in the “Project Files” window. 
-Put all the images in Track path and put them in the suitable order. 
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- When putting images in Track , they become a (Video Clip) and appear in the 
Video Preview. 


- Put the images in order in Tracks on the Timeline. 


— To make the video clip more attractive and effective, we add music or sound 
comment. 


— To add sound file, click Add File icon + on the Main Toolbar and add the 


sound file to appear in “Project Files” tab. 


Edit Title Vi Help 
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Project Files 


Show All Video Audio Image Filter 


@ 17 seconds 
00:00:00:01 


Track 4 


File Edit Title View Help 
Brees Aee + E 
Project Files E Video Preview 


ShowAll Video Audio Image Filter 


2015-6356... 105801.im... 
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+roject Files Transitions Effects 


t > vk + B® @ 20seconds 
00:00:00:01 


Track 4 Practice Test 1.mp3 
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4-Preview the video 


-To preview the video, click the Play icon in the Preview 
window. 


File Edit Title View Help 
RAB 4% : 


Project Files Video Preview 


ShowAll Video Audio Image 


hqdefault... 


Project Files Transitions Effects 


To create a video clip do the following: 


1- Import files ( images/ sound) into the program. 
2- Put images/sound on the program Timeline. 
3- Preview the video. 


eee 


Exercise 


- Cooperating with your classmates and with the help of the teacher, import 
files ( audio/ images) into the program. 


Students, in their notebooks or writing tools, the steps to follow to import 
files into the program. 
Notes 


- To add anew Track, click the +Add Track icon on the Edit Toolbar. 
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B 17 seconds 


-To change the order of the video clips (images/ sound) on the track, drag 


and drop and reorder them. 
-To set playing the sound file, drag and drop the sound on the track on the 
Timeline and put in its place. 
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Save Project: 


To create video clips, we use images, sound files and text files; 
these all must be saved in one folder. All the previous files were saved 
in the folder “ Pro 1” to be able to go and edit ,delete or add later. How 
can we save a video project? 


Activity 


Cooperating with your classmates and with the help of the teacher ,save the 
video project: 
Steps to follow 
To save the video project, do the following: 
-Save all the files (images, sound, text, etc) in one folder. 
-On the Main Toolbar, select “File”, then “Save Project As” 
-Name the Project “ sch”;all names must be in English. 
-Define where to save in the folder “Pro1” 
-End the program. 
-To continue the project, start the program, then open the “Pro1” 
folder, then open “sch” project. 
-Edit the video clip. 
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Important Notes for the teacher to save the project: 


The teacher should do the following: 
During work in OpenShot in Ms Windows, and saving 
the project, notice that the “sch” file is unknown so it 


appears 
-To make the file work in the OpenShot program, do 

“Association” as follows: 

-right click on the “sch” file .Select Properties, change then more 


options. 

-Select : Look for another app on this PC. 

- The system will find the OpenShot application folder. 
-Select association to the executable file of the program. 


Ë Local Disk (C:) 
@ Local Disk (D:) 
© Local Disk (E) y 


The “sch” file will appear like this 
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To save a video project, do the following: 
- Save all the used files,( images, sound, text...) in a specific folder. 


- From the Main Toolbar, select File, Save Project As 
- Name the project in English. 


Edit Video Clips 


After Previewing the Video, the clip may need some editing like Reorder 
the scenes, delete, increase the time, decrease the time or adjust the 
time to match the sound file length 

1-Control the play time of the Video Clip 


After previewing the video clip, the sound file time may be longer 
than the image show time. This appears in the Timeline which ends the 
images and the sound continues. This can be seen also in the clips on 
the timeline 
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Project Files Transitions Effects 


B 20seconds 


Practice Test 1.mp3 


ip} 


The image clip 
time length on Track 2 


the timeline 


-We can control the sound clip to end at the same time with the last 
image clip on the timeline 


Project Files Transitions Effects 


e] @ 20seconds 
oe 0 20 00:01:40 00:02:00 


00:00:00:01 
Track 4 Practice Test 1.mp3 


da 


"Timeline" 
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Control the time length for images and sound on the 
timeline 


Activity 


Cooperating with your classmates and with the help of the teacher, control the 
audio clip by limiting the time on the Timeline. 


Steps of the Activity: 
-Move the play indicator, drag and drop the arrow ( or use the arrows 
on the keyboard) until it reaches the end of the last image on the 
timeline. 


Project Files Transitions Effects 


B @ 20seconds 


am 


00:00:30:01 
Track 4 Practice Test 1.mp3 
Dove 


i Abe 


-Put the mouse cursor on the Track, right click the mouse. 
-Select the Slice clip, then Keep left slide. 
-Students take notes of what happens in this selection. 


Project Files 


Keep Both Sides 
Keep Left Side 
$#$ Properties Keep Right Side 
Track 4 Practice Test 1.mp3 Remove Clip 


da 


tab 


00:00:30:01 
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- When moving the play indicator on the timeline, then select one track 
and select “Slice Clip”, the video clip splits at the indicator place and 
becomes two slides : right slide and left slide. 


Exercise — 
— d 
-With the help of the teacher, the students make out the difference in 
the following: 
When selecting Slice Clip, the following appears: 
-Keep Both slides 
-Keep left slide 
-Keep Right slide 
The students make out the difference in the three choices. 


Notices: 
-Selecting Keep Both Slides, the clip splits into two slides and keep them 
both 


Project Files Transitions Effects 
(3 @ 20seconds 


00:00:29:20 


Track 4 Practice Test) Lo 


ad 


-When selecting Keep left Slide, the clip splits into two slides and keep 
the left slide only. 


Project Files Transitions Effects 


© @ 20seconds 


00:00:29:20 


Track 4 Practice Test 1.mp3 


dd 
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-When selecting Keep right 
the right slide only. 


Project Files Transitions Effects 


00:00:29: 11 


Track 4 tae Practice Test 1.mp3 


To control the time length of the video clip: 
-Define the time length of the clip on the timeline. 


-Drag and drop the head of the play indicator and move it 
till it goes to the right place on the timeline. 
-Right click the clip Track, a drop box appears: 


- Select Slice Clip to split the clip into two slides. 
-Keep Both Slides, the right and left slides are kept. 
-Keep the left slide. 

-Keep the right slide. 
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Add Effects to a Video Clip 


Add “Effects” to the video clip and control the time of this effect to 
show the clip in a certain way. 


| Activity 


Cooperating with your classmates and with the help of the teacher, add Effects to 
a video clip. 


Steps to follow: 
Click “Effects” tab. 


Show All Video Audio Image 


Project Files Transitions Effects 


Some effects appear. 
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ShowAll Video Audio 


Colour Saturation 


Project Files Transitions Effects 


00:00:00:01 
st 1.mp3 


Track 4 jpg 
. = — "| 


Choose an effect. 
Drag and drop the effect to add it to the clip. 


ile Edit Title View Help 
Rem > +E 
ffects Video Preview 


ShowAll Video Audio 


-e r 
Blur Chroma Ke... 
= = a) 


Brightness ... 


i ce 


Alpha Mask / ... 


Colour Saturation 


Project Files Transitions Effects 
@ 11 seconds 


00:00:02:08 


- Preview the video 
- Students take notes to see what happens on the video clip. 
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Notes: 


The Effect sign appears 00:00:00: 11 


Track 4 W 897.jpg 


== 
.To read the effect name put the cursor on the Effect sign 


00:00:00:11 
Track 4 @ < Negate (4 
Renz 


G zt 
a aaao 


- To delete the Effect, right click the effect signand select “Remove 
Effect” 


00:00:00:11 


Track 4 m 297 ina 
Remove Effect 


Add Effect to a video Clip: 
- Click the Effects tab. 


- Drag and Drop an effect to add it to the clip. 

- The effect sign appears on the clip. 

- To read the effect name put the cursor on the effect sign. 

- To delete the effect, right click the effect sign and select “Remove 
Effect” 
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Second: Add Transitions to a Video Clip 


Cooperating with your classmates and with the help of the teacher, add 


Transitions to the video clip. 


- Click the “Transitions” tab. 


File Edit Title View Help 
RAB Ae +E Hz ® 


Project Files 


E6) Video Preview 


ShowAll Video Audio Image 


2015-6356... 105801.im... 


hqdefault... DSC_0600.... 


JI 


Practice ... 


Project Files Transitions Effects 


+ DODO YKJ O 


- Some transitions appear. 


Eile Edit Title View Help 
Rees A o + E = - 
Transitions GI Video Preview 
Show All. Common Fi 
i | i ; 
S f Ai iS g = = 


= ma m m 


Project Files Transitions Effects 


t+ > VY K DS BB 


00:00:02:08 


Track 4 | TE =y Test 1.mp3 
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Drag and Drop one of the transitions to add to the video clip 


File Edit Title View Help 
Ee = a œ> 
Transitions Video Preview 


Show All Common 


Wipe top ... 

HH FIFEN 

HWE d 

Project File Transitions Effects 
© 

00-00-00-t > 

Track 4 OT tice Test 1.mp3 

-e 


z 


-The transition is put at the beginning or the end of the video clip. 

Control the Transition length by drag and drop it to increase or decrease the show 
time. 

-Preview the video. 
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Exercise 


With the help of the teacher, the students use Files", “ Effects” and “ Transition “ 
and know the difference . 


& Video Preview 


ff) age 
Li, en sm ee 


E71 TOULL G 


> 


Project Files Transitions 


To add Transitions to a video clip: 
- Click the Transitions tab 
- Drag and drop one transition and add it to the clip. 
- Add a transition at the beginning and at the end of the clip. 
- Clip the transition time length by drag and drop it to increase or 
decrease it. 
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Third : Add Text to a Video clip 


Activity 


Cooperating with your classmates and with the help of the teacher, add text 
to a video clip. 


Steps to follow: 

-Select the text to add to the video. 

- Select the places to add the text to ( at the beginning, in the middle or 
at the end of the video) 

- From the menu Title, select Title, the dialog box: 

1- “Select a template” ros TT 
2-“Change Font” 

3-“"Text Color” i = 


Text: Text Color 


4- a“ Bac kg ro u n d Co | o r" Background: Background Colour 


Advanced: Use Advanced Editor 


5- Save text in a file 


Template: Gold 1 = 


Line 1: @oslacy! 4.2! & wyo 


Lal Gay) Anda Lajia 


Font: Change Font 


Text: I Text Color 


Advanced: Use Advanced Editor 


Save Cancel 


- The teacher discusses with the students the steps to fill in the dialogue 
box to add text. 
- Press Save to save the text in the project folder “Pro1”. 
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Name the file in English. 


- The text file appears in the “Project Files”. 


Eile Edit Title View Help 


e = = 
Project Files 


Show All Video Audio Image 


auu Zeta yt iN Ae 


Project Files 


00-00-00:01 


Track 4 


-To add text to video clips, drag and drop the text file in the Project Files and add it 
to a track. 


To add text to a video clip: 
-From Title menu, select Title. 
- Fill in the dialog box. 
- Save text in a file “Save”. 
-Name the text file in English. 
- The text file is found in “Project Files”. 
- Add text file to the video clips by drag and drop the text file and add it to 
a track. 
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Notes: 

-The text can be added at the beginning, in the middle or at the end of the video 
clip. 

- Add a Track or more to add the text and other clips ( images or sound) 

- Reorder the video clip ( audio , images or text ) on the Track 


@ 20seconds 


00:00:00:01 


Track 6 


Track 4 


a “Reorder the video clips” 
Exercise 


O d 
- With the help of the teacher, the students add another text file to the video as 
follows: 

- Follow the steps mentioned above to create another text file with information 
about their school, like the Governorate, the Directorate and so on 
- Save the text file in the project folder “Pro1”. 
-Add text to the video clip as done before. 
- Reorder the video Clips. 


El-Sanya Prep School 
for Girls 


Cairo 


South Cairo Directorate 
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Export a Video Clip to file 


After finishing the project, putting all the needed scenes and 
editing through adding suitable Effects and Transitions, the project can 
be exported to a video file with a suitable extension. The program 
makes it easy to export in different extensions. 


| Activity 


Cooperating with your classmates and with the help of the teacher, export the 
video to a file. 


Steps to follow 
-Press Export Vide@ in the Main Toolbar, or File, then Export 
video. 


SU iseyi iid A 


A dialogue box of Export Video appears. 

-Name the file to save “File Name”. 

-Select the path to save in. 

- Select the extension to the “Target “video file. 

-Decide the file quality level ( High quality - Medium quality — Low 
quality) 

-Press “Export Video “ 
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preview it. 


File Name: Untitled Project 


Folder Path: C:A\Users\AHAMED.204 Browse... 


Simple Advanced 


Select a Profile to start: 


Profile: All Formats . . 
= "Export Video Dialog Box 


Select from the following options: 


Target: MP4 (h.264) 


Video Profile: HDV 720 24p 


Quality: High 


Export Video Cancel 


Project1 


“Play the Video “ 
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To export a video to a file with suitable extension: 
- Press "Export Video". 
- In the Dialog box of “Export Video", select the following: 
- “File Name”. 
-Folder Path. 
- Extension of the Target video File. 
- Decide the Quality level. 


\ -Export the video by pressing “Export Video”, j 


Types of Video Files with different Extensions 


- There are different types of Video files with different extensions. 
They are different in size, quality and clarity. The extension of the video 
is decided according to the usage. 


Exercise 


- Cooperating with your classmates and with the help of the teacher, serach the 
internet for: 


-Different video types and usage. 
- The difference between different extensions, MP4, AVI,..., according to 
size, quality and clarity. 
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Remember 


To Create a video file do the following: 
— Import images and sound files into the program. 
— Reorder the video clip on the Timeline of the program. 
Save Project: 
— Create a Project Folder and name it in English, on one of the drives. 
Put all the files, sound, images, etc., in the project folder. 


Save the Project file and name it in English from the Main Tolbar , File, 
Save Project As 


Save the project file in the Project Folder. 


Edit the Video Clips by 
— Control the length of the video clip time. 
— Add Effects to the video clip. 
— Add Transitions to the clip. 
— Add text to the clip by: 
— From Title, select Title and fill in the Dialog Box 


- Save the text in a file (Name the text file in English) 


— The text file appears in the “Project Files”; then add the text file to the 


Video clip by drag and drop the text file and add it to a Track. 


Export the video to a file with a suitable extension: 


-There are different types of video files with different extensions like AVI, 
MP4 and so on. 
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The Program Interface consists of the following 


File Edit Title View Help 
Re DGD Aee + 


Project Files ~ E Video Preview 


Show All Video Audio Image |Filte 


‘Project Files Transitions Effects 
t+ > VK YH Ø @ 20seconds 
j = 00:00:20 00:00:40 00:01:00 00:01:20 o 00:02:20 
00:00:00:01 | ; i i | 
Track 4 


Track 3 


1- 
2- 
3- 
4- 
B- 
6- 
7- 
8- 
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Question 2 : Complete : 
To create video clips, follow the following steps 


Question 3:-Put the following steps in the correct order: 


To Save a project, you should do the following: 


) Save the project file in the project Folder. 
) Save the project file and name it in English from the Main 
Toolbar, File, Save As. 
(......... ) Create a project folder on one of the drives and name it in 
English ( ) Put all the files ( images, audio, etc..) in the project 
folder. 
Question 4: Complete : 
The program timeline consists of: 


00:00:39:15 


Track 4 


Track 2 
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The answer is done through 


Ms Word program “ Answer Lesson Three” file in “ Projects and Answer 
template) Folder 


Prepare This for the Next Lesson: MG P 


Y 


Stage 4 to design and create a website is the Execution >>% 
stage when the Web pages are created. | 


How can you create website pages by HTML? 
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Create Web Pages by 


Using HTML 


Objectives 


General Objective: 
To create a website using HTML 


Behavioural Objectives: By the end of this lesson, students will be able 
to: 


eidentify the following basic rules to create a web page By HTML. 
eidentify the structure to create a web page by HTML. 

eadd content to the web page (text, image, video , hyperlink,..etc) 
eformat the content of the web page. 

einsert a hyperlink in the web page / linking the site pages. 
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HTML 


(Hyper Text Markup Language) 


In the Previous lessons, we know the main stages to create a website. One of 
the main stages to create a website is the execution stage, when the paper design 
becomes a web page in which all data, texts, images, videos, sound files are input. 
This happens according to the design stage for each web page and creating 
hyperlinks between the pages using a programming language. 


- In this lesson, we will know in details how to use HTML to create a web 


page.Then, we will see in detail how to create “ñiy” web site. 
(get a 


Main Page — About us- Photo Album — Vision — Mission- 
Contact us 


Vision and Mission Photo Album About US 


When School Built 


Vision: 

-Prepare a distinguished student 
able to 

Mission 

Develop Stud gga skills 


Website pages." iia" Diagram of 
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HTML: 


-It is a coding language used to create internet pages which are used through an 
internet browser. 


HTML codes: 


To create a web page, HTML codes are used, these codes are called Tags. An 
internet browser executes these tags on the browser page. 


To create a web page using HTML tags, do as follows: 


— Create a text file using a text editor to write and edit the HTML tags. 


— Write the HTML tags between these signs “<” “ >”, 

- Write most of the tags with a start " < >" and an end " </>". 

— Save the text file with the HTML tags with.htm or .html extension 
— Open the saved file using a web browser and notice the result. 


— Write HTML tags in capital or small letters. 
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The Structure of creating a web page using HTML 


Activity (1) 


Cooperating with your classmates and with the help of the teacher, identify 
the structure of creating a web page using HTML tags. 


Steps to follow: 
-Upload a text editor program 


- Write the tag <html> at the beginning of the code to refer that the document is written 
in HTML. 


-The HTML tag is divided into two parts: 

1- head: the part where the page information is written for the browser like page title. 
2- body: the part where the content is written. 

So the structure of the tag file is as follows 


Writing the structure to create a web he Structure of a web page created by HTML 


page by using HTML in text editor 
<html> 
<head> 


<html> 
<head> 


</head> 
<body> 


</head> 
<body> 


</ body> </body> 
</html> </html> 
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. Activity (2) 
Exercise: 


Cooperating with your classmates and with the help of the teacher, the students 
search the internet to find a Web page title and content. 


Web page title 


Aulzill eu pill duly 


P X | wwmoegov.eg 


Web page Content 


The web page consists of a TITLE and CONTENT, the title appears in the address 
bar at the top of the page. 
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l Exercis _ | 


To add the text "i)a" as a title to the web page, students with the help of the 


teacher do the following: 
- Start a text editor program. 
- Type the structure to create the page using HTML tags. 


- Type the tag <title> (iu). </title> in the field <head >...</head 


<html> 
<head> 


</head> 


f awed i Nm Dre ) <body> 


</body> 


Open the file School-htm (web </html> 
Write the tag in a text editor 


page) using a web browser. 
program. 
Save the file with the name school.htm 


- Open the file school.htm (the web page) using a web browser to see the result of 
executing the typed tags. 
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Adding a content to a web page (text-image-video- hyperlink...) 


The web page can include text, image, video and hyperlinks 


First: Adding a text to the web page: 
To add a text" 5 sbias diuais ilaa iugi" to the content of the web page. 


Activity (3) 


Cooperating with your classmates and with the help of the teacher, do the 
following: 
- In the previous text file, we type the phrase " 3 gbias 4asbig ilaa iu ts "inside 
the <body>...</body> tag. 
- Save the text file with the same title "school.htm" 
- Open the file "school.htm"using the internet explorer to see the outcome of the 
tags you have typed. 


<html> 
<head> 
<title> siw, </title> 
</head> 
<body> 


</body> 
</html> 


T y Pig a nr aw Sere ere 
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Pa 


7 


| | Practice 
Using the previous practice and with the help of the teacher, students do the 
following: 

- Type the HTML tags for the previous practice using capital letters. 

- Leave spaces between the words of the text. 

- Use the enter key to leave lines between the words of the text. 

- Save the text file with .htm extension. 

- Display the file using the internet explorer. 


Important Notes: 
- You can write the HTML tags with Capital letters or Small letters. 


- The internet explorer isn't affected by the left spaces in the file 
or by moving to a new line by pressing the enter key. 


Ce) 


Changing the direction of the web page using "dir" 


When designing a web page with Arabic view, we have to change the 
direction of the page to make the content from right to left to suit the Arabic 
language and to execute this, we use the property "dir", where we specify the 
direction of the web page according to the value of the property dir as in the 
following table. 


Value | Effect 


Rtl From right to left 


Ltr From left to right 
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Cooperating with your classmates and with the help of the teacher, use the 


previous practice to change the direction of the content of the web page from 
right to left as follows: 


-Editing the code by adding the dir to the <body> tag. 


- Assign the value rtl to dir property to change the direction <body> to be <body 
dir="rtl"> 


- Save the text file. 


- Open the web page file by the internet explore to appear as follows: 


<html> 
<head> 


<title> wi,» </title> 


| <body dir="rtl"> a 
ò ghiing ihig haa aiu ro 


</body> 
The web page by the Explorer </html> 


The direction of the content 


Typing the text in the text 
from right to left 


Editor 
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( Practice _ 


Cooperating with your classmates and with the help of the teacher , make a 
comparison between the effect of the value "rtl" and the value "Itr" to dir 
property on the direction of the web page content. 


<body dir="Itr"> <body dir="rtl"> 


The direction of the content The direction of the content 


from left to right from right to left 


( A comparison that shows the effect of the values of dir property) 


Web page formatting 


There are many formats which can be applied to the content of the web page 
to look more attractive. Some of them are applied on the text of the web page 
and some of them are applied on the background of the web page: 


e formatting the text includes many processes, from them 
o Type the beginning from a new line 
o Text alignment 
o Putting spaces between words 
o Formatting the font (face, volume, cooler, style) 

e Formatting the web pages includes: 
o Changing the cooler of the web page background. 
o Putting an image as a background web page. 
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Firstly : formatting the text in the web page: 


1-Writing at the beginning of a new line by <br> tag. 


To display the text in the web page in two lines, we use the <br> tag where we 
use this tag to start writing in a new line, we use the <br> tag. 


[activ 


Cooperating with your classmates and with the help of the teacher, do the 
following: 
- Open the previous text file. 


- Add the tag <br> and add the text "Name: <html> 

Mohamed Khaled" <head> 

- Save the text file with the .htm extension. <title> sw,» </title> 
- Open the file in the internet explorer. </head> 


<body dir="rtl"> 
iaalay A gyal Asa pall 
J aaao ; pw! 
A b </body> 
</html> 


Noticing the text content appears on two lines 


Writing the code in the text 


editor 


The web page by the internet 


explorer after executing the code 
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2- Centering the text by <center>... </center> tag. 


To put a text in the middle of the line, we use <center> tag . 


Cooperating with your classmates and with the help of the teacher: 

- Open the previous text file. 

- Add the <center> school location </center>. 

- Save the text file with the htmextension. 

- Open the file in the internet explorer. 

- Noticing that the phrase "School location" appears in the middle of the line. 


<html> 
<head> 
<title> siwo </title> 
</head> 
<body dir="rtl"> 
Flmywork\HTMLAT P ~ È gapa X| <center> pal gio </center> 
Bgbiing tty dom iu po 
E SO? 
MS eae rat Mls aoso © pull 


</body> 
The web page after executing < /html> 


the code 


Typing the code in 


Formatting the text in the web page the text editor 
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3- Add blank space between words by &nbsp 


When leaving any number of spaces between words in the file, the explorer 
will deal with it when viewing the page as one space. To control the number of 
spaces between words, we use the symbol &nbsp. We repeat it according to the 
number of the needed spaces between words. 


Activity (7) 


Cooperating with your classmates and with the help of the teacher: 
- Open the previous text file. 
- Writing the code site &nbsp; &nbsp; &nbsp, &nbsp; the school 
- Save the text file with the .htm extension. 
- Open the file in the internet explorer. 
Noticing the phrase "School Website" <html> 
and putting four spaces between the <head> 
two words as in the following diagram: <title> sys </title> 
</head> 
<body dir="rtl'> 


<center> 


s &nbsp; &nbsp; &nbsp; &nbsp; Ajaa 


By shtiag Ailig ilaa iuda 
<br> 

The web page after executing a daaa : wil! 

</body> 

</html> 


the code 


Writing the code in the tex 
editor 
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Formatting the font in the web page (face, size, color) 


4-a Format the font in the web by <font>...</font> 


To control the face, the size and the color of the font, the font is formatted by 
the <font> tag and this is an tag that has a group of properties. 


property function 


face Choose the font 


color Choose the font color 


size Choose the font size 


Notes: 
To change the font size, we have to notice that the browser identifies seven 


different font sizes that we choose by the property "size" the value is from 1 to 7. 


To create a web page with align right and contains the text " 4abig dla fis ts 
5) gia 9" with Andalus face, red color and size 6. 

With the help of the teacher, students do the following: 

- Write the code. 

- Save the text file with the .htm extension. 

- Open the file in the internet explorer. 
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<html> 
<head> 
</head> 


<body dir="rt1"> 

<font face="andalus" color="red" size="6"> 
pgbiing iibig dom giu ro 

</font> 


</body> 
</html> 


- After using the close </font>, this finishes the effect of the tag on any text, 
written later and after that the text displays with the default shape. 


- In case, we don't use the <font> tag ,the color face displays on the web page with 
the default face. 
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Formatting the font in the web page (underlined/ bold/ italic) 


4-b formatting the font in the web page 


There are several Tags through which the font can be formatted. 
Some of them are shown in the following table: 


t 


| function 


ag 
<u> 


9 


Activity (9) 


To modify the previous web page file, format the font by underlining the phrase " 
By gles Aih g laa (ci jaa" 


With the help of the teacher, students do the following: 


- Add the following code: 


<u> 5 ghiiag ihig ilaa cite </u> 


<html) - Save the text file with the .htm extension. 
<head> 
</head> - Open the file in the browser. 


<body dir="rtl") 

<font face="andalus" color="red" size="6"> 
CU) yhing ibig daa yi ro </y) 

</font> 


</body> 


«ht» g 
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Ayghiag äashig alas gissa 


7 


| Practice 


With the help of the teacher, students do the following: 

- format the font in the web page to make the phrase " bjghiag iihi g Alen piu jia 
"italic. 

- format the font in the web page to make the phrase " shia iihi g ilaa giu jia 
" bold. 

Note that: 

- To format the font to be italic, we write the code: 

<i> 5 jghiag Aidi g Area (iu te </i> 

- To format the font to be bold, we write the code: 

<b> 6) ghiay iihi g ilaa nie </b> 
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1- Selecting the background color for the web page by 
the property bgcolor 


We use the property bgcolor that connects to the <body> tag to select the color of 
the web page background. 


Activity (10) 


Cooperating with your classmates and with the help of the teacher: 
- Write the tag <body bgcolor="green"> 


<html> D+ ¢! Gamay 
<head> 
</head> 


<body bgcolor="green" > 


</body> 
</html> 


vapaill pad gal saf of al AGS 
Writing the code in the text 


formatting 


The following table contains some names of colors that can be used as a value to 
the property bgcolor 


AO E T E | 


Color 
Name 


Yellow Sky Blue 


formatting the web page background 
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2- Adding image as a web page background by the 
property Background 


To add an image as a web page background, we use the property Background that 


relates to the <body> tag. 
Activity (11) 


Cooperating with your classmates and with the help of the teacher do the 
following: 

- Prepare an image file to be put as a web page background. 

- Save image inside the same folder that is saved in the web page. 

- Write the needed code to add image as a web page background" imagel1.jpg" 
<body background="imagel.jpg" > 

- Save the text file by the .htm extension. <html> 


- Open the file in the internet explorer. <head> 
Noticing the image display as a web page </head> 


Background. 


<body background="imagel. jpg" > 


</body> 
</html> 


Writing the code in the text 
editor 
The web page after 


executing the code 
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Dealing with images in the web pages: 


1- Insert image inside the web page by <img> tag. 


1- To insert image in the web page, we use <img> tag by selecting the following: 
The place where we save the image file and the name of the file and we do this by 
the property src to <img> tag. 


Activity (12) 


With the help of the teacher, students design a web page, its content as follows: 
- The text" b gbtiag ihi g Alea (gi jae" is red and underlined. 
- The school image displays under the text. 


<html> 
<head> 
</head> 


<body > 

<font face="andalus" color="red" size="6"> 
<U) pgbiing iby dom piss ro </> 

</font> 

<br> 


<img src="school. jpg") 


pody 


</html> 
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| Practice 
a / 


With the help of the teacher, students search on the internet for the types of 
image files extensions, which we can used in the web pages. 


Important Notes: 


- In the previous practice, the image file and the web page file must be in the same 
folder, so we write the image file name and its extension with the property src. 


- In case, there is a file image in another folder, we must write the complete path 
of the image file. 


Formatting the images in the web pages: 
The inserted image can be formatted 


by controlling the dimensions (height & width) and align it with the web 
page. 


1- Controlling the image dimension in the web page. 


We control the image dimension through the properties of the <img> tag as 
follows: 


- The property height. E.g. Height= "200" 
- The property width. E.g. Width= "300" 
We use the measurement unit "pixel" to measure the image dimensions. 
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Activity (13) 


With the help of the teacher, students insert the image and make its dimensions 
as follows: 

Width= 800 pixel 

Height= 450 pixel 

In the previous workshop, we write the following code: 

<img src="school.jpg" height="450" width="800"> 


<html> 
<head> 
</head> 


<body > 

<font face="andalus" color="red" size="6"> 
„ybi ihig ihan yi ro 

</font> 


<img src="shool, jpg" hieght="450" width="800"> | 


</html> 
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Dealing with images in the web page: 


3- Align the image inside the web page 


We align the image through the property Align to the <img> tag and the property 
has the following values: 


Value | function 


Right Align the image to the right 

Left Align the image to the left 

Middle Center the text in the middle of the image 
Bottom The text is positioned align down the image 


Top The text is positioned align top the image 


| Activity (14) 


Cooperating with your classmates and with the help of the teacher modify 
the web page in the previous practice as follows: 


- formate the image to display the text with the image at the same line and 
the text aligns the middle of the image. 


- Save the text file with the .htm extension. 
- Open the file in the Internet Explorer. 
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<html> 
<head> 
</head> 


=) Gmo HTML ili 


<body > 

<font face="andalus" color="red" size="6" zg 

agbling iliy yam giu 0 4 iglaing igh ilas inp 
</font> 

<img src="shool. jpg" align="middle"> 


</html> 


"The text with the image at the same line and the text aligns the middle of the 


image" 
| | Practice | 


Cooperating with your classmates and with the help of the teacher do the 


following: 
- Align the image to right of the web page. 
- To align the image to position the text align the top of the image. 


Notes 
- To align the image to the right of the web page, the code is align="right". 


- To align the image to position the text to the top of the image, the code is 
align="right". 
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Dealing with the sound in the web page. 


Insert the sound as a background sound by <bgsound>tag 


We can insert the sound as a background to the web page to listen to when we 
download the web page by the browser. 

Important Notes: 

We must notice that the "Internet Explorer" is the only browser that supports the 
<bgsound> tag to insert the sound as a background to the web page. 


Using <bgsound> and the property src that follows, we insert the sound as a 
background to the web page. The property src to the tag takes the sound file 
name value and its extension (and this in case we save the sound file with the web 
page file in the same folder. Moreover we must write the complete file sound 
path). 


Activity (15) 


Creating a web page that when it is m 
opened in the browser 
"Internet Explorer" the sound file <head> 
"Egypt.MP3" is played. </head> 
With the help of the teacher, students modify 
the code as it is shown in the picture. <body > 
- Save the text file with the htm extension. 


- Open the web page file in the Internet <bgsound src="egypt.MP3"> 
Explorer. </ body> 


</html> 
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Dealing with the video inside the web page 


Insert Video in the web page by <embed> tag 


By using the <embed> tag, we insert the video inside the web page. We must notice 
that the tag supports the video file of the type (.swf - .avi - .mov). 


By using the <embed> tag and the property src that follows, we insert the 
video. The property value src takes the name of the video file and its extension(In 
case, we save the video file with the web page file in the same folder and we must 
write the complete video file path). 


With the help of the teacher, students create a web page which contains video 
that we can play inside it (internet.avi) 


<html> 
<head> 
</head> 


<body > 


<embed src="internet.avi"> | 


</body> 
</html> 


The web page in the browser Hyperlink 
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Insert hyperlink in the web page by the <a>...</a>tag . 


Hyperlink is a hyper image or a hypertext, connected to a title and 
when we click it, we move to this title and it can be in the same page or 
in another one, in the same site or in another one. 


| | Practice © | 


Cooperating with your classmates and with the help of the teacher do the 
following: 

- Download the Ministry of Education web site. 

- Search inside the site pages for hyperlinks (hypertext or hyper image) 

Follow these hyper texts and images by clicking on them. - 

- Discuss with the students the different shapes of hyperlinks (in the same 
page, among the site pages, between site page and its hyperlink with another 
page in another site. 


NEN | 


= ales 


UHG pall S AA YN papal Aig NY) hall pe pally halla | lal ag) | hy SOY aed lp | iy GON Sy 
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Hyperlink: 

To insert a hyperlink, we use href property to the <a> that selects its value; 
the needed title, that we want to move to, as follows 
<a href= "the needed title, we want to move to" > the text or image </a> 


1- Insert hyperlink text by the <a>...</a> tag. 


To insert a hyperlink text (hypertext) by href property to the <a> tag. 


| Activity (17) 


Cooperating with your classmates and with the help of the teacher , create a 
web page that contains a hyperlink text "Ministry of Education). When we click on 
it, it moves to the main homepage of the Ministry. 

With the help of the teacher, students type the code of the web page as 
follows: 


<a href="http://www.moe.gov.eg" >Ministry of Education</a> 


— 


The address of the Ministry | APpearsasa 


site that we want to move to hypertext in the 
browser 


Hyperlink 
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The steps of creating and executing a hyperlink text 


1- Type the code in the text editor and save it. 
2- Open the web page in the browser. 

3- Click the hypertext in the web page. 

4- The Ministry of Education site is loaded. 


<html> 
<head> 


</head> 1- Type the code in 


the text editor 


<body > 
<a hret="http: //www.moe. gov. eg" belly dy pill èl j9</a> f 
</body> a 
</html> 


Ministry of Education 


CF | |g 
20/50 


oN eae’ 


2- Open the web page in the 
browser and when we click the 


3- Loading the hypertext, the Ministry site is 
Ministry site loaded 
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2- Insert a hyperlink to an image 


To make a hyper image, we must follow: 
- Display the image by <img> tag. 
- Put <img> inside <a>...</a> to make it a hyperlink 


Cooperating with your classmates and with the help of the teacher create a 
web page that contains a hyper image and when we click the image, we move to 
the web page "My school" 

- Modify the code in the previous web page to replace the text by the image 
"tools.jpg to change the hypertext to a hyper image as follows: 


<a href ="myschool.htm"><img src="tools.jpg"></a> 


The web page title that Appears as a hyper 
we need to move to image in the browser 


Hyperlink 
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The steps of creating and executing a hyper image 


1- Write the code in one of the text editors and save it. 

2- Open the web page in the browser and when we click the hyper image, the web 
page "My school" is loaded. 

3- The web page "My school" is loaded. 


<html> 
<head> 

1- Writé the code in one of the 
</head> 


<body > 


text editors and save it. 


<a href = ‘myschool.htm'> <img src='tools.jpg’> </a> 
</body> 
</html> 


-9 _— 


2- Open the web page in the 


an The web page "My school' is 
Aadan browser and when we click the 


hyper image, the web page "My 
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Remember 


Some HTML tags to create a web page as follows: 


<html> 


Function 


Written at the beginning of the code to refer 
that the document is written by html. 


<head> 


A place where we write the web page title to 
the browser 


Associated 
Properties 


<body> 


A place where we write the content that will 
appear inside the web page 


Dir — bgcolor - 
background 


<title> 


Choose a title to the web page 


<br> 


<center> 


To add a text in the middle of the line 


&nbsp 


To insert a space between words in the 
browser 


<font> 


To control the font format 


_ Finishing the current line and start a new line — 


Face-color- 
size 


underline 


bold 


italic 


To display the image in the web page 


src-height- 
width-align 
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function Associated 
properties 


<bgsound> To insert sound as a background to 
the web page 


<embed> To add a sound or video to the web 
page 


<a> To create a hyperlink 


<input> To input data through the web page 
by different ways depending on the 
property value type 


<form> Create a model in the web page action 
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questions & Practice 2 


uestion: 1 Choose the suitable correct answer to the followin 
phrases: 


1- HTML refers to the phrase............ 


a- Hyper Text Markup Library. 
b- Help Table Made Layout. 
c- Hyper Text Markup Language. 


2- The web page which uses HTML in its design, it is only considered a......page. 


a- interactive 
b- Active 
c- static 


3- Using languages like JavaScript and PHP besides HTML in the design of the 
web page is to modify the page to............ 


a- interactive 

b- Homepage 

c- subpage 

4- To display a text on the web page, we write the text in the................ 
a- Head 


b- Title 
c- Body 
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5- We must save the HTML file with the extension 
a- Docx 
b- Jpg 
c- Htm 
6- To display the text "italic" on the web page, we use the tag 
a- <u> 
b- <i> 
c- <b> 
7- To select the background color of the web page, we use the property 
a- bgcolor 
b- background 


c- color 


8- The property which is connected to the <img> tag, one of these properties is 


a- path 
b- href 
c- src 


9- The <a> tag ,is used to inside the web page. 
a- align text 

b- add a hyperlink 

c- play video 


10- To select the font type in <font> tag , we use the property 
a- Font name 

b- size 

c- face 
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Question 2: Match (A) from (B): 
(A) (B) 


1- Web Site ( ) a document with e-content that is published on 


the internet and is displayed by the browser. 


2- Homepage ( ) display read-only information without the 
ability to do processing from guests to the content 


3- Web Page ( ) a place on the internet that is consisted of a 
web page or more and is visited through specific 
titles 

4- Static Page ( ) the first page on the web site and through it we 


easily move to the rest pages. 


5- Dynamic / ( ) the property to move to the site pages. 
Interactive page 


( ) information page that displays an interactive 
content to the guests to interact and process it. 


Question 3: Put_(v_) or the correct sentence and (X ) for the wrong one: 


1-HTML is used to create interactive web pages. 


2- JavaScript is used to modify the static page to interactive page. 


3- The tag that is written at the beginning of the code to refer that the 
document is written by html is <title>. 


&nbsp;. 

5- To add image to the web page, we use the <img> tag. 

Question: 4 Say the main code which is needed to create the HTML file? 
<img src= "school.png"> 


Although there are no errors in the previous code, the image doesn't display on 


the web page when loading it by the browser. Give a reason? 
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Question: 5 Explain what is meant by the following codes: 


<Title> My School </Title> 


Answer the questions using 
MS Word program from the fourth lesson answer file in the folder (model answer 
and projects) 
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A question to prepare for the next lesson: 
After creating a web page and adding its content. 
How can you create a web site? 
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Projects 
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The first project 
A practical project to design a web site 


"My school web site" 


Second year Prep 119 


Ministry of Education 


Objectives 
The general objective: 
To create a web site by a HTML language 
The specific objectives (practical) 
By the end of this lesson the student will be able to: 
e specify the number of the site pages from the Structural design of the 
website. 


e create the various page of the web using the HTML. 
e insert a hyperlink among the site pages. 


Creating the project "My school web site" 


My school 


Homepage About school Photo Album _ Vision 


Vision and message 


The school vision: 


Photo Album About school 


The date of school construction: 


Preparing a distinguished pupil able 


to School Address............-+ School phone......... 


Message: 
Developing the pupil's skills 
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A Structural design to the project "My school web site" 


Creating my school web site 


From the Structural design of the web site, it is clear that it consists of five web 


pages as follows: 


1 
2 
3. 
4 
5 


. The Home page "My school" is saved as Home.htm . 


. The web page "About school" is saved as About.htm. 


The web page "Images Album" is saved as Photo.htm. 


. The web page "Vision and message" is saved as Vision.htm. 


. The web page "Contact us" is saved as Contact.htm. 


Creating and saving each web page will be as text file created by the HTML. 
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Creating the "Homepage" Home.htm 


My school 


Homepage About school Photo Album Vision and message Contact us 


The home web page 
consists of: l 
- The text "iuu" The font | “title= ao</title> 


<head> 


(colour: red-type: Tahoma- | </head> 

size: 6) <body bgcolor="skyblue" dir='rtl"> 

- Five text hyperlinks. <center> 

- Image <font face="tahoma’ color="red’ size="6'> Aw)ae</font> 

The code of the "Home" <br> 

web page as follows: <font face=andalus’ color="purple’ size="5'> 
<a href="home.htm’>4.4ui)) aial </a>&nbsp; &nbsp; 
<a href="about.htm’>4.4).4!) oo </a> &nbsp; &nbsp; 
<a href='photo.htm’> _) pal asf </a>&nbsp; &nbsp; 
<a href='photo.htm'>4lLujl5 4.5) </a>&nbsp; &nbsp; 
<a href='contact.htm’>L: nail</a> 
<br><br> 
<img src="school.png’ height="450" width="800'> 
</center> 
</body> 
</html> 
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Creating the web page "About School" about.htm 


The web page "About School" consists of: 

- Texts: "The date of its construction" — "The school address" — The school phone" 

- The font (color: red- face: Tahoma — size: 6) 

- Video About School 

- Image hyperlink(on clicking, we return to the Homepage ieee ees eo 
The school address ..The 

The code of the web page "About School as follows: 


<html> 

<head> 

<title> is ajaa jtitle> 

</head> 

<body bgcolor="skyblue" dir='rtl'> 
<center> 

<font face='andalus’ color="red’ size="6'> 


iaaa Ge <br> 


Auda!) Aids GG <br> 

ths} Sate) — SUM) iad Qleic<br> 
VY¥EOVVAS: 6 sill <br> 

glui alai ila pall<br> 

<embed src='video.mp4" height=300" width="300' > 


<br><br> 

<a href="home.htm’><img src='back.jpg’ height=100° width="100'></a> 
</center> 

</body> 

</html> 
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Creating the web page "Photo Album" photo.htm 


The web page "About School" consists of: 

- The text "Photo Album" 

- The font (color: red — face: Tahoma- size: 6). 

- 3 images 

- Image hyperlink (on clicking, we return to the Homepage) 
The code of the web page "About School" as follows: 


Photo Album 


<body bgcolor="skyblue’> 

<center> 

<font face="tahoma’ color="red’ size="6'> 

jóa] agilicbr> 

<img src="students.jpg’ height="400'° width="300'> 

<img src="teachers.jpg’ height="400' width="300'> 

<img src='yard.jpg height="400' width="200'> <br> 


<a href="home.htm’ ><img src="back.jpg’ height="100' width="100'></a> 
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The web page "Vision and Mission" consists of: ian and Miesto 


- The text "Vision and Mission" 


- The font (colour: red — face: Tahoma- size: 6). The Sena hvision: 


a rae Preparing a distinguished pupil 
- The text "The school vision who is able to 


The code of the web page "Vision and Mission" as follows: Message: 
Developing the pupil's skills 


4a 


<head> 

<title> Aaji /title> 
</head> 

<body bgcolor="skyblue"> 


<center> 


<font face="tahoma’ color="red’ size="6'> 


<u> Aural) 4.5) </u> 


<br><br> 

Jets Gill alas)... <br> 

AlLull<br> 

lle) lg Asai.. <br> 

<br><br> 

<a href="home.htm’ ><img src='back.jpg’ height="100° width="100'></a> 
</center> 

</body> 

</html> 
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The Second Project 
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With the help of your teacher design, create and save the following: 
First: a text file using the text editor program that includes the following: 
The concept of the following: 

WebSite — WebPage — Homepage- Static Webpages — Interactive WebP 

ages 

- The steps to create audio file as follows: 

First: Preparation 

Second: Executing an audio file 

Third: Modifying the audio volume 

Fourth: Export audio to the file. 


- The steps of creating video 
- The steps of saving the video project- save project. 


- The steps of modifying the video shots through.... 


- The steps of exporting the video to a file with an available extension. 


Second year Prep 127 


Ministry of Education 


Second: Creating a presentation about creating web pages using HTML to include 
the following: 


The next main rules to create web page using the HTML Tags. 
The structure steps to create web page by HTML Tags. 


Adding a content to the web page (text- image- video — hyperlink) 
formatting the web page content. 
Inserting a hyperlink inside the web page / among the site pages. 
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